<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <script type="text/javascript" src="/js/jquery-2.1.4.js" ></script>
    <script type="text/javascript" src="/js/vue.js" ></script>
<!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
<!--    <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
    <!-- 引入样式 -->
    <link type="text/css" rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <!--    &lt;!&ndash; 引入组件库 &ndash;&gt;-->
    <script type="text/javascript" src="/element-ui/lib/index.js"></script>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
        .fenye{
            width: 500px;
            height: 100px;
            margin: 0 auto;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="div">

        <!--表格-->
        <template>
            <el-table :data="tableData" style="width: 100%"  :row-class-name="tableRowClassName">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <img class="user_img" :src="props.row.url" />
                            <el-form-item label="用户收货地址">
                                <template>
                                    <el-table
                                            :data="props.row.addressList"
                                            border
                                            style="width: 100%"
                                            :row-class-name="tableRowClassName">
                                        <el-table-column
                                                prop="status"
                                                label="是否默认"
                                                width="180">
                                        </el-table-column>
                                        <el-table-column
                                                prop="name"
                                                label="收货人"
                                                width="180">
                                        </el-table-column>
                                        <el-table-column
                                                prop="tel"
                                                label="电话"
                                                width="200">
                                        </el-table-column>
                                        <el-table-column
                                                prop="address"
                                                label="地址"
                                                width="280">
                                        </el-table-column>
                                    </el-table>
                                </template>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column label="用户ID" prop="userId">
                </el-table-column>
                <el-table-column label="用户名" prop="userName">
                </el-table-column>
                <el-table-column label="电话" prop="tel">
                </el-table-column>
                <el-table-column label="年龄" prop="age">
                </el-table-column>
                <el-table-column label="性别" prop="sex">
                </el-table-column>
                <el-table-column label="生日" prop="birthday">
                </el-table-column>
                <el-table-column label="签名" prop="sign">
                </el-table-column>
                <el-table-column label="状态" prop="status">
                </el-table-column>
            </el-table>
            <!--分页-->
            <div class="fenye">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="page.pageIndex"
                        :page-sizes="[2, 4, 6, 8]"
                        :page-size="page.number"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="page.dataCount">
                </el-pagination>
            </div>
        </template>
    </div>
    <script type="text/javascript">
        new Vue({
            el:"#div",
            data:{
                tableData:[],
                page: {
                    pageIndex:1,
                    number:8,
                    pageCount:null,
                    dataCount:null
                },
            },
            created(){
               this.selectUser();
            },
            methods:{
                //查询用户
                selectUser(){
                    var _this = this;
                    $.ajax({
                        url: "/user/selectUser",
                        type: "get",
                        data: {
                            "index":_this.page.pageIndex,
                            "number":_this.page.number,
                        },
                        dataType: "json",
                        success: function(data) {
                            _this.page.pageIndex = data.obj.pageIndex;
                            _this.page.number = data.obj.number;
                            _this.page.pageCount = data.obj.pageCount;
                            _this.page.dataCount = data.obj.count;
                            _this.tableData = data.list;
                            for(var i=0;i<_this.tableData.length;i++){
                                _this.tableData[i].sex==0?(_this.tableData[i].sex='女'):(_this.tableData[i].sex='男');
                                _this.tableData[i].status==0?(_this.tableData[i].status='已注销'):(_this.tableData[i].status='在册');
                                for(var j=0;j<_this.tableData[i].addressList.length;j++){
                                    _this.tableData[i].addressList[j].status==0?_this.tableData[i].addressList[j].status='默认':_this.tableData[i].addressList[j].status='备选';
                                }

                            }
                        },
                        error: function(data) {
                            alert(data.responseJSON.message);
                        }
                    });
                },
                tableRowClassName({row, rowIndex}) {
                    if (rowIndex === 1) {
                        return 'warning-row';
                    } else if (rowIndex === 3) {
                        return 'success-row';
                    }
                    return '';
                },
                //分页
                handleSizeChange(val) {
                    this.page.number = val;
                    this.selectUser();
                },
                handleCurrentChange(val) {
                    this.page.pageIndex = val;
                    this.selectUser();
                }
            }
        })
    </script>
</body>
</html>